بــســم الله الرحمن الرحيم
((ولا تحسبن الله غافلا عما يعمل الظالمون
إنما يؤخرهم ليوم تشخص فيه الأبصار مهطعين
مقنعي رءوسهم لا يرتد إليهم طرفهم وأفئدتهم هواء))
صدق الله العظيم
اهلاً بكم زوار ومتابعي المدونة الكرام
اليوم درسنا سنتعرف علي كيفية اضافة التأثيرات الحركيةCSS Animation لعناصر مدونتك بشكل رهيب جدا
مجال التأثيرات الحركية مجال واسع جداً ومن الصعب ان يتم شرحه بالكامل لأنه يعتمد على جزء كبير في لغة CSS لكن هناك حل سهل وبسيط يعتمد عليه أغلب المستخدمون للتأثيرات وهو عبر التأثيرات الجاهزة
لهذا جلبت لكم هذا الموقع لمعاينة التأثيرات التي تريد تطبيقها علي مدونتك او علي عناصر مدونتك او علي صور مدونتك بأشكال حلوة وجميلة جدا ورائعه
اولا الدخول للموقع التالي :
كيف يمكن عمل تلك التأثيرات وجعلها تعمل في مدونتي ؟؟
إليك الآتي :
أول شئ استخدم الكود التالي اسفل الوسم <head>
<link href='//cdn.rawgit.com/MohamedAbodia/dabourphone/master/Animated.css' rel='stylesheet' type='text/css'/>
<script src='//googledrive.com/host/0B38VxVtxtadTQzJIMkxLQ0pmUnM/wow.js' type='text/javascript'/>
الآن لتتمكن من استخدام التأثيرات في مدونتك كل ما عليك فعله هو استخدام الكلاس التالي
"#class="wow animated
رمز # يستبدل بإسم الحركة
مثال لو لدينا صورة نريد ان نطبق عليها الحركة سيصبح كودها كالتالي
<img class="wow animated asd" src="http://1.bp.blogspot.com/-x6u3f279vRY/VsO2WgtnUhI/AAAAAAAACH8/6wQlSfJNMQE2r0r4PZ7mHeCWj1Jl a7KqACKgB/s1600/300x250.png"/>
كما تلاحظ كلمة asd هي إسم الحركة
- كيف نحصل على اسم الحركة ؟
من الموقع التالي والذي ادرجته لكم بالاعلي
http://mohamedabodia.github.io/dabourphone
ستجد معاينة لكل الحركات وأسمائها فقط اكتب اسم الحركة وطبقه على ما تريد يجب أن تكتب الإسم مضبوط
مثال آخر لو اردنا تطبيق حركة معينة على مواضيع المدونة بحيث كلما تم التمرير لأسفل يحدث التأثير على الموضوع
أغلب قوالب بلوجر تعتمد على هذا الكود كحاكم للمواضيع
<div class='post-outer'>
كل ما عليك فعله تطبيق الكود فيصبح
<div class='post-outer wow animated fadeInUp'>
طبعا يمكنك تعديل التأثير الحركي بالتأثير الذي تريد
ملحوظة
قد يكون الكود متكرر في القالب فيجب التطبيق عليهم جميعا أو التجربة حتى تجد الصحيح